<template>
	<view class=" text-white">
		<view class="p-12">
			<view class="flex flex-y-center gap-10 ">
				<image :src="USERINFO?.avatar?USERINFO?.avatar:WEBCONFIG?.web_logo" class="avatar round-circle"></image>
				<view class="flex-1 gap-4">
					<view class="flex flex-y-center gap-6">
						<text class="fs-17 fw-600 text-ellipsis-1">{{USERINFO?.nickname}}</text>
						<y-level :level="USERINFO?.level"></y-level>
					</view>
					<text class="fs-14 text-grey-1">推荐人:{{USERINFO?.parent_name ||'平台'}}</text>
				</view>
				<view class="bg-black-1 pl-20 px-6 py-8 round-30 fs-15" @click="$page.open('/pages/dealer/rule')">
					分佣规则
					<text class="iconfont icon-fanhui1 text-white fs-14"></text>
				</view>
			</view>

			<view class="mt-12 gradient round-12 px-20 py-15 relative text-white">
				<view class="bg-white round-left-30 pl-16 pr-6 py-8 text-black absolute right-0 top-10 fs-13" @click.stop="toWith">
					立即提现
					<text class="iconfont icon-fanhui1 fs-13"></text>
				</view>

				<view class="bg-white text-black round-left-30 pl-16 pr-6 py-8 absolute right-0 fs-13" style="top: 96rpx;"
					@click.stop="$page.open('/pages/bill/index')">佣金明细
					<text class="iconfont icon-fanhui1 fs-13"></text>
				</view>

				<view class="flex flex-column gap-2 ">
					<text>可提现佣金</text>
					<text class="fs-32 fw-600">{{USERINFO?.balance}}</text>
				</view>
				<view class="flex flex-x-space-between mt-20">
					<view class="flex flex-column gap-4 text-center gap-4">
						<text class="fs-20 fw-600">{{USERINFO?.total_balance - USERINFO?.balance}}</text>
						<text class="fs-14">累计提现(元)</text>
					</view>
					<view class="flex flex-column gap-4 text-center gap-4">
						<text class="fs-20 fw-600">{{USERINFO?.total_balance}}</text>
						<text class="fs-14">累计佣金(元)</text>
					</view>
				</view>
			</view>


			<!-- #ifdef MP-WEIXIN -->
			<view class="p-12 overflow-hidden" v-if="WEBCONFIG?.wx_ad_status.includes('wx_video_new') ">
				<ad :unit-id="WEBCONFIG?.wx_video_new" ad-theme="white"></ad>
			</view>
			<!-- #endif -->

			<view class="mt-12 bg-black-1 round-12  py-15">
				<view class="flex flex-x-space-between px-20">
					<text class="fs-16">我的团队</text>
					<view class="fs-14 text-grey-1" @click="$page.open('/pages/dealer/team')">
						<text>查看全部</text>
						<text class="iconfont icon-fanhui1"></text>
					</view>
				</view>
				<view class="grid-columns-3 gap-6 text-center mt-20 ">
					<view class="flex flex-column   gap-4  gap-4 relative">
						<text class="fs-18 fw-600">{{detail?.teamCount}}</text>
						<text class="fs-14 text-grey-1">团队总数(人)</text>
						<view class="line absolute right-0 w-1 h-p-100"></view>
					</view>
					<view class="flex flex-column gap-4  gap-4 ">
						<text class="fs-18 fw-600">{{detail?.firstCount}}</text>
						<text class="fs-14 text-grey-1">一级团队(人)</text>
					</view>
					<view class="flex flex-column gap-4  gap-4 ">
						<text class="fs-18 fw-600">{{detail?.secondCount}}</text>
						<text class="fs-14 text-grey-1">二级团队(人)</text>
					</view>
				</view>
			</view>

			<view class="mt-12 bg-black-1 round-12  py-15">
				<view class="flex flex-x-space-between px-20">
					<text class="fs-16">分销订单</text>
					<view class="fs-14 text-grey-1" @click.stop="$page.open('/pages/dealer/bill/index')">
						<text>查看全部</text>
						<text class="iconfont icon-fanhui1"></text>
					</view>
				</view>
				<view class="grid-columns-2 gap-6 text-center mt-20 ">
					<view class="flex flex-column   gap-4  gap-4 relative">
						<text class="fs-18 fw-600">{{billInfo?.orderCount}}</text>
						<text class="fs-14 text-grey-1">订单总数(单)</text>
						<view class="line absolute right-0 w-1 h-p-100"></view>
					</view>

					<view class="flex flex-column gap-4  gap-4 ">
						<text class="fs-18 fw-600">{{billInfo?.orderPrice}}</text>
						<text class="fs-14 text-grey-1">订单金额(元)</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { $http, $page } from '@/utils';
	import { useRefs, useUserStore, useWebConfigStore } from '@/stores'
	import { onLoad } from '@dcloudio/uni-app'
	import { onMounted, ref } from 'vue';
	const { USERINFO } = useRefs(useUserStore())
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const tipPopup = ref(null)
	onLoad(() => {
		getTeamInfo()
		getBillInfo()
	})
	const detail = ref({
		teamCount: '--',
		firstCount: '--',
		secondCount: '--'
	})
	const billInfo = ref({
		orderPrice: '--',
		orderCount: '--',
	})
	const getTeamInfo = () => {
		$http.get('Team/getTeamInfo').then(res => {
			detail.value = res.data
		})
	}
	const getBillInfo = () => {
		$http.get('Bill/getBillInfo').then(res => {
			billInfo.value = res.data
		})
	}
	const toWith = () => {
		if (USERINFO.value.level_id <= 0) {
			return tipPopup.value.open();
		}
		$page.open('/pages/dealer/withdrawal/index')
	}
</script>

<style>
	.fs-32 {
		font-size: 64rpx;
	}

	.line {
		background: linear-gradient(180deg, rgba(196, 196, 196, 0) 0%, #C4C4C4 49%, rgba(196, 196, 196, 0) 100%);
	}
</style>